<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="企业名称：">
              <el-input v-model="enterpriseData.name" placeholder="请输入企业名称" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="inquireEnterprise">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" @click="$router.push('/park/enterprise/add')">添加企业</el-button>
        <div class="text item">
          <template>
            <el-table
              :data="enterpriseTableList"
              style="width: 100%"
            >
              <el-table-column type="expand">
                <template>
                  <template>
                    <el-table
                      :data="tableData1"
                      style="width: 100%"
                    >
                      <el-table-column
                        prop="date"
                        label="租凭楼宇"
                      />
                      <el-table-column
                        prop="name"
                        label="租凭起止时间"
                      />
                      <el-table-column
                        prop="address"
                        label="合同状态"
                      />
                      <el-table-column prop="address" label="操作">
                        <template>
                          <el-button type="text">续租</el-button>
                          <el-button type="text">退租</el-button>
                          <el-button type="text">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </template>
              </el-table-column>
              <el-table-column
                type="index"
                label="序号"
                width="180"
              />
              <el-table-column
                label="企业名称"
                prop="name"
              />
              <el-table-column
                label="联系人"
                prop="contact"
              />
              <el-table-column
                label="联系电话"
                prop="contactNumber"
              />
              <el-table-column prop="address" label="操作">
                <template>
                  <el-button type="text">添加合同</el-button>
                  <el-button type="text">查看</el-button>
                  <el-button type="text">编辑</el-button>
                  <el-button type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <el-pagination
          :current-page.sync="enterpriseData.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="enterpriseData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>

    </div>

  </div>

</template>

<script>
import { getEnterprise } from '@/api/enterprise'
export default {
  name: 'Enterprise',
  data() {
    return {
      total: 0,
      tableData1: [],
      enterpriseTableList: [],
      enterpriseData: {
        page: 1,
        pageSize: 10,
        name: ''
      }
    }
  },
  created() {
    this.enterpriseList()
  },
  methods: {
    // 获取表格列表
    async enterpriseList() {
      const res = await getEnterprise(this.enterpriseData)
      // console.log(res)
      this.enterpriseTableList = res.data.rows
      this.total = res.data.total
    },
    // 查询
    inquireEnterprise() {
      this.enterpriseList()
    },
    // 分页-当页
    handleCurrentChange(page) {
      this.enterpriseData.page = page
      this.enterpriseList()
    },
    // 分页-总页
    handleSizeChange(pageSize) {
      this.enterpriseData.pageSize = pageSize
      this.enterpriseList()
    }
  }
}
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
   .item {
    margin-top: 20px;
    margin-bottom: 10px;
  }
.el-pagination{
    float: right;
  }
</style>
